<template>
    <div class="flex">
        <template v-for="countryName in countryArr" :key="countryName">
            <CipItem :country-name="countryName"/>
        </template>
    </div>
    <p>
        从图中可以看出，非洲国家大部分均出现了不同程度的通货膨胀，如南非(South Africa)在1970-1990之间由于种族隔离政策不断被西方经济体制裁导致经济受到大幅度影响；安哥拉(Angola)在20世纪90年代发生多次内战，战争导致通货膨胀率疯狂飙升，在最高一年达到4000以上。也有部分国家经济较为稳定，如突尼斯(Tunisa)独立后，通货膨胀率经过短暂上升又逐渐下降至较低水平并保持稳定。
    </p>
</template>

<script setup lang="ts">
import CipItem from '@/views/DataStatistics/Cip/item/CipItem.vue';

const countryArr = [
    'Algeria',
    'Angola',
    'Central African Republic',
    'Ivory Coast',
    'Egypt',
    'Kenya',
    'Mauritius',
    'Morocco',
    'Nigeria',
    'South Africa',
    'Tunisia',
    'Zambia',
    'Zimbabwe',
];
</script>

<style scoped>
.flex {
    display: flex;
    flex-wrap: wrap;
}
</style>
